<template>
  <div class="jd-swipebox">
    <!-- 轮播图 S -->
    <van-swipe indicator-color='red'>
      <van-swipe-item>
        <van-grid :column-num="5">
            <van-grid-item 
              v-for="list in lists" 
              :key="list.id" 
              :text="list.name"
            >
              <template #icon>
                <div class="goods">
                    <img :src="list.img" alt="">
                </div>
              </template>
            </van-grid-item>
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid :column-num="5">
            <van-grid-item 
              v-for="list in lists" 
              :key="list.id" 
              :text="list.name"
            >
              <template #icon>
                <div class="goods">
                    <img :src="list.img" alt="">
                </div>
              </template>
            </van-grid-item>
        </van-grid>
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图 E -->
  </div>
</template>
<script>
import 
{ 
  Swipe,
  SwipeItem,
  Grid, 
  GridItem
  } from 'vant';
export default {
  data() {
    return {
      lists:[
            {id:1,name:'京东超市',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png'},
            {id:2,name:'数码电器',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png'},
            {id:3,name:'京东服饰',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png'},
            {id:4,name:'京东生鲜',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png'},
            {id:5,name:'京东到家',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/116602/7/11200/3796/5efbf375Ebba41029/f07cc166f368fa05.png'},
            {id:6,name:'充值缴费',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/146390/3/1846/4909/5efbf39aEe5f5f797/300071558a9ab078.png'},
            {id:7,name:'9.9元拼',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/179511/33/4023/3422/609e0d45Ea495a996/3783165b48cf1e08.png'},
            {id:8,name:'领卷',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/113589/24/11332/4897/5efbf3feE705d87db/e5c12d5e943266b9.png'},
            {id:9,name:'领京贴',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/131663/33/3380/3674/5efbf50fEf79cf314/af4b57d2383e605d.png'},
            {id:10,name:'PULS会员',img:'//m.360buyimg.com/mobilecms/s120x120_jfs/t1/123730/37/5924/4189/5efbf567E0a226121/d04df7c74c87cf68.png'},
        ]
    };
  },
  components: {
    [Swipe.name]:Swipe,
    [SwipeItem.name]:SwipeItem,
    [Grid.name]:Grid,
    [GridItem.name]:GridItem,
  },
  created() {
  },
  computed: {
    
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
//轮播图
.van-swipe{
    background-color: #f6f6f6;
}
.goods{
  img{
    width: 1.178667rem;
    height: 1.178667rem;
  }
}
</style>
